<template>
  <!-- 给div添加一个内边距 -->
  <div class="goods-list-container">
    <!-- 使用组件 -->
    <my-header :title="title"></my-header>
    <!-- 目标3:父传子将数据渲染 -->
    <my-table :list="list">
      <!-- 目标4:使用插槽将表体内的数据放到当前组件中方便后面的操作,使用具名插槽方便使用表体和表头 -->
      <!-- 用template标签包裹 -->
      <!-- 要将数据传递到另一个组件中需要再使用作用域插槽 -->
      <template v-slot:header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template v-slot:body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <!-- 目标5:遍历数组tags用span标签包裹 -->
        <td>
          <!-- 目标7:添加标签功能 -->
          <!-- 使用到v-if v-else 数据中有inputVisible属性-->
          <input
            @keydown.esc="scope.row.inputValue = ''"
            @blur="scope.row.inputVisible = false"
            @keydown.enter="enterDown(scope.row)"
            v-model.trim="scope.row.inputValue"
            v-focus
            v-if="scope.row.inputVisible"
            type="text"
          />
          <button
            @click="scope.row.inputVisible = true"
            v-else
            class="btn btn-primary"
          >
            +Tag
          </button>
          <br />
          <span
            style="margin-right: 5px"
            v-for="(item, index) in scope.row.tags"
            :key="index"
            class="badge bg-warning"
            >{{ item }}</span
          >
        </td>
        <td>
          <!-- 目标6:点击删除获取id找到索引号删除当前的tr -->
          <button @click="delFn(scope.row.id)" class="btn btn-danger btn-sm">
            删除
          </button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
// 导入组件
import MyHeader from "../components/MyHeader.vue";
import MyTable from "../components/MyTable.vue";
export default {
  // 注册组件
  components: {
    MyHeader,
    MyTable,
  },

  data() {
    return {
      // 目标1:设置my-header标题
      title: "GoodList案例",
      list: [],
    };
  },
  // 目标2:在钩子函数上使用axios链接服务器接收数据,使用created是为了能最快的去获取数据
  async created() {
    let res = await this.$axios({ url: "/api/goods" });
    console.log(res.data.data);
    this.list = res.data.data;
  },
  methods: {
    delFn(id) {
      // console.log(id);
      let index = this.list.forEach((item) => item.id === id);
      this.list.splice(index, 1);
    },
    enterDown(row) {
      // console.log(row);
      if (row.inputValue.length === 0) alert("请输入内容!");
      row.tags.push(row.inputValue);
      row.inputValue = "";
      row.inputVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.goods-list-container {
  padding: 45px 0 50px 0;
}
</style>